<!--
 * @Description: 
 * @Author: your name
 * @Date: 2025-06-06 11:39:32
 * @version: 
 * @LastEditors: your name
 * @LastEditTime: 2025-06-06 21:07:52
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="./src/asset/logo.svg" type="image/svg+xml" />
    <title>王者荣耀</title>
    <link rel="stylesheet" href="./src/asset/index.css" />
    <script src="./node_modules/vue/dist/vue.global.js"></script>
    <script src="./node_modules/axios/dist/axios.min.js"></script>
    <script src="./node_modules/lodash/lodash.min.js"></script>
  </head>

  <body>
    <div id="app">
      <div class="container">
        <!-- 上面搜索部分 -->
        <div class="search">
          <div class="title">
            <p>综合</p>
            <p>定位</p>
          </div>
          <div class="types">
            <div class="type-list">
              <div
                class="radio"
                data-type="pay_type"
                data-value="10"
                :class="{checked:checked==10}"
                @click="changeType('zonghe',10)"
              >
                本周免费
              </div>
              <div
                class="radio"
                data-type="pay_type"
                data-value="11"
                :class="{checked:checked==11}"
                @click="changeType('zonghe',11)"
              >
                新手推荐
              </div>
            </div>
            <div class="type-list">
              <div
                class="radio"
                data-type="all"
                v-for="type in types"
                :key = "type.value"
                :class="{checked:checked==type.value}"
                @click="changeType('dingwei',type.value)"
              >
                {{type.name}}
              </div>
            </div>
          </div>
          <div class="keyword">
            <div class="input">
              <input
                type="text"
                placeholder="请输入你要搜索的英雄名"
                v-model="searchHero"
              />
            </div>
          </div>
        </div>

        <!-- 下面列表展示部分 -->
        <ul class="list">
          <li v-for="hero in heroPick" :key="hero.ename">
            <a
              :href="`https://pvp.qq.com/web201605/herodetail/${hero.ename}.shtml`"
              target="_blank"
            >
              <img
                :src="`https://game.gtimg.cn/images/yxzj/img201606/heroimg/${hero.ename}/${hero.ename}.jpg`"
              />
              <span v-html="hero.cname"></span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <script src='./src/js/index.js'>
      // const { createApp } = Vue
      // const app = createApp({
      //   data() {
      //     return {
      //       searchHero: '',
      //       isSearch: false,
      //       heroes: [],
      //       types: [
      //         { name: '全部', value: '0' },
      //         { name: '坦克', value: '3' },
      //         { name: '战士', value: '1' },
      //         { name: '刺客', value: '4' },
      //         { name: '法师', value: '2' },
      //         { name: '射手', value: '5' },
      //         { name: '辅助', value: '6' },
      //       ],
      //       query: {
      //         type: 'dingwei',
      //         value: 0,
      //       },
      //       checked: 0,
      //     }
      //   },
      //   methods: {
      //     async getHeroLists() {
      //       //获取英雄数据
      //       const { data } = await axios.get(
      //         'http://project.x-zd.net:3001/apis/herolist'
      //       )
      //       this.heroes = data.data
      //       console.log(this.heroes)
      //     },
      //     changeType(type, value) {
      //       this.query.type = type
      //       this.query.value = value
      //       this.checked = value
      //       this.searchHero = ''
      //     },
      //   },
      //   mounted() {
      //     this.getHeroLists()
      //   },
      //   computed: {
      //     heroPick() {
      //       const { type, value } = this.query
      //       console.log(type, value)
      //       if (this.searchHero) {
      //         let res = this.heroes.filter((hero) =>
      //           hero.cname.includes(this.searchHero)
      //         )
      //         res = _.cloneDeep(res)
      //         return res.map((item) => {
      //           item.cname = item.cname.replace(
      //             this.searchHero,
      //             `<span style="color:red">${this.searchHero}</span>`
      //           )
      //           return item
      //         })
      //       } else if (type == 'zonghe') {
      //         return this.heroes.filter((hero) => hero.pay_type == value)
      //       } else if (type == 'dingwei') {
      //         if (value == 0) {
      //           return this.heroes
      //         } else {
      //           return this.heroes.filter(
      //             (hero) => hero.hero_type == value || hero.hero_type2 == value
      //           )
      //         }
      //       }
      //     },
      //   },
      // })
      // app.mount('#app')
    </script>
  </body>
</html>
